import QtQuick 2.0
import QtQuick.Controls 2.14
import QtQuick 2.14

import "../../../basic"
import "../../../commonUI"

// 桌面歌词
Item {
    id: lyricsRoot
    anchors.left: parent.left
    anchors.right: parent.right
    height: 800
    Label {
        id: desktopLyricsLabel
        text: qsTr("桌面歌词")
        font.pixelSize: 22
        font.bold: true
        font.family: BasicConfig.commFont
        anchors.left: parent.left
        color: "white"
        clip: true
        height: 25
        verticalAlignment: Text.AlignVCenter
    }
    Row {
        id: row1
        anchors.bottom: desktopLyricsLabel.bottom
        anchors.left: desktopLyricsLabel.left
        anchors.leftMargin: 150
        spacing: 50
        Repeater {
            model: ["启用桌面歌词","启用歌词总在最前面","外文歌词显示翻译","外文歌词显示音译"]
            CustomCheckBox {
                text: modelData
            }
        }
    }
    ListModel {
        id:fontSizeModel
    }
    Row {
        id: row2
        anchors.top: row1.bottom
        anchors.left: row1.left
        anchors.right: row1.right
        spacing: 20
        anchors.topMargin: 30
        Repeater {
            model: ["字体","字号","字粗","描边"]
            Item {
                width: 150
                height: 60
                Label {
                    id: fontLabel
                    text: modelData
                    font.pixelSize: 20
                    font.bold: true
                    font.family: BasicConfig.commFont
                    anchors.left: parent.left
                    anchors.top: parent.top
                    color: "#DDD"
                    height: 25
                }
                CustomComboBox {
                    width: parent.width
                    height: 20
                    anchors.top: fontLabel.bottom
                    anchors.left: fontLabel.left
                    anchors.topMargin: 20
                    Component.onCompleted: {
                        if (0 === index) {
                            model = ["默认","仿宋","华文中宋","华文宋体","华文新魏","华文楷体","华文细黑","华文行书",
                                    "华文楷体","宋体","幼圆","微软雅黑","微软雅黑 Light","新宋体","方正姚体","方正舒体"]
                            text = "默认"
                        } else if (1 === index) {
                            model = fontSizeModel
                            for(let i = 20; i< 97; i++) {
                                model.append({modelData:String(i)})
                            }
                            text = "20"
                        } else if (2 === index) {
                            model = ["标准","加粗"]
                            text = "标准"
                        } else if (3 === index) {
                            model = ["有描边","无描边"]
                            text = "有描边"
                        }
                    }
                }
            }
        }
    }

    Label {
        id: adjustLabel
        text: "调整样式"
        font.pixelSize: 20
        font.bold: true
        font.family: BasicConfig.commFont
        color: "#ddd"
        height: 25
        anchors.left: row2.left
        anchors.top: row2.bottom
        anchors.topMargin: 50
    }
    Row {
        id: row3
        anchors.top: adjustLabel.bottom
        anchors.left: adjustLabel.left
        anchors.topMargin: 20
        spacing: 50
        Repeater {
            model: [["单行显示","并排显示"],["横排显示","竖排显示"],["居中","左对齐","右对齐"]]
            CustomComboBox {
                width: 150
                height: 30
                model: modelData
            }
        }
    }
    // 更改配色方案
    Label {
        id: changeColorLabel
        text: "更改配色方案"
        font.pixelSize: 20
        font.bold: true
        font.family: BasicConfig.commFont
        color: "#ddd"
        height: 25
        anchors.left: row3.left
        anchors.top: row3.bottom
        anchors.topMargin: 50
    }
    Row {
        id: row4
        anchors.top: changeColorLabel.bottom
        anchors.left: changeColorLabel.left
        anchors.right: changeColorLabel.right
        anchors.topMargin: 20
        spacing: 70

        CustomComboBox {
            model: ["自定义","周杰红","落日晖","可爱粉","天际蓝","清新绿","活力紫","温柔黄","低调灰"]
            width: 150
            height: 30
            text: "落日晖"
        }
        Repeater {
            model: ["已播放","未播放"]
            Rectangle {
                id: colorSelectRoot
                radius: 15
                width: 150
                height: 30
                border.width: 1
                border.color: "#28282d"
                color: "#1a1a20"
                Rectangle {
                    id: colorRect
                    width: parent.height / 2
                    height: width
                    anchors.left: parent.left
                    anchors.leftMargin: 20
                    anchors.verticalCenter: parent.verticalCenter
                    gradient: Gradient {
                        GradientStop { position:0; color:index===0?BasicConfig.finishedLyricsUpColor:BasicConfig.unFinishedLyricsUpColor }
                        GradientStop { position:1; color:index===0?BasicConfig.finishedLyricsDownColor:BasicConfig.unFinishedLyricsDownColor}
                    }
                }
                Text {
                    id: txt
                    color: "#ddd"
                    text: modelData
                    font.pixelSize: 20
                    anchors.left: colorRect.right
                    anchors.leftMargin: 10
                    font.family: BasicConfig.commFont
                    anchors.verticalCenter: colorRect.verticalCenter
                }
                MouseArea {
                    anchors.fill: parent
                    hoverEnabled: true
                    onEntered: {
                        cursorShape = Qt.PointingHandCursor
                    }
                    onExited: {
                        cursorShape = Qt.ArrowCursor
                    }
                    onClicked: {
                        BasicConfig.playFlagState = index === 0 ? true : false
                        BasicConfig.openColorSelectPopup()
                    }
                }
            }
        }
    }

    // 预览
    Label {
        id: previewLabel
        text: qsTr("预览")
        font.pixelSize: 20
        font.bold: true
        font.family: BasicConfig.commFont
        color: "#ddd"
        anchors.left: row4.left
        anchors.top: row4.bottom
        anchors.topMargin: 40
    }
    Rectangle {
        anchors.left: row2.left
        anchors.right: row2.right
        height: 300
        radius: 20
        anchors.top: previewLabel.bottom
        anchors.topMargin: 10
        border.width: 1
        border.color: "#28282e"
        color: "#1a1a20"
        Item {
            width: titleLabel.implicitWidth
            height: titleLabel.implicitHeight + 1
            anchors.centerIn: parent
            Item {
                anchors.left: parent.left
                anchors.top: parent.top
                anchors.bottom: parent.bottom
                width: parent.width / 2
                clip: true  // 超出部分裁剪
                Rectangle {
                    id: gradientFinishedContenRect
                    width: 10
                    height: 10
                    gradient: Gradient {
                        orientation: Gradient.Vertical
                        GradientStop { position: 0; color: BasicConfig.finishedLyricsUpColor }
                        GradientStop { position: 1; color: BasicConfig.finishedLyricsDownColor }
                    }
                    visible: false
                    layer.enabled: true
                    layer.smooth: true
                }
                Label {
                    text: qsTr("Jtom的Music")
                    color: BasicConfig.finishedLyricsBorderColor
                    anchors.left: parent.left
                    anchors.verticalCenter: parent.verticalCenter
                    font.bold: true
                    font.family: BasicConfig.commFont
                    font.pixelSize: 65
                }
                Label {
                    id: titleLabel
                    text: qsTr("Jtom的Music")
                    color: "white"
                    anchors.left: parent.left
                    anchors.verticalCenter: parent.verticalCenter
                    font.bold: true
                    font.family: BasicConfig.commFont
                    font.pixelSize: 64
                    layer.enabled: true
                    // 文字渐变效果
                    layer.samplerName: "maskSource"
                    layer.effect: ShaderEffect {
                        property var colorSource: gradientFinishedContenRect
                        fragmentShader: "
                            uniform lowp sampler2D colorSource;
                            uniform lowp sampler2D maskSource;
                            uniform lowp float qt_Opacity;
                            varying highp vec2 qt_TexCoord0;
                            void main() {
                                gl_FragColor =
                                    texture2D(colorSource, qt_TexCoord0)
                                    * texture2D(maskSource, qt_TexCoord0).a
                                    * qt_Opacity;
                            }
                        "
                    }
                }
            }
            Item {
                anchors.right: parent.right
                anchors.top: parent.top
                anchors.bottom: parent.bottom
                width: parent.width / 2
                clip: true  // 超出部分裁剪
                Rectangle {
                    id: gradientUnfinishedContentRect
                    width: 10
                    height: 10
                    gradient: Gradient {
                        orientation: Gradient.Vertical
                        GradientStop { position: 0; color: BasicConfig.unFinishedLyricsUpColor }
                        GradientStop { position: 1; color: BasicConfig.unFinishedLyricsDownColor }
                    }
                    visible: false
                    layer.enabled: true
                    layer.smooth: true
                }
                Label {
                    text: qsTr("Jtom的Music")
                    color: BasicConfig.unFinishedLyricsBorderColor
                    anchors.right: parent.right
                    anchors.verticalCenter: parent.verticalCenter
                    font.bold: true
                    font.family: BasicConfig.commFont
                    font.pixelSize: 65
                }
                Label {
                    text: qsTr("Jtom的Music")
                    color: "white"
                    anchors.right: parent.right
                    anchors.verticalCenter: parent.verticalCenter
                    font.bold: true
                    font.family: BasicConfig.commFont
                    font.pixelSize: 64
                    layer.enabled: true
                    layer.samplerName: "maskSource"
                    layer.effect: ShaderEffect {
                        property var colorSource: gradientUnfinishedContentRect
                        fragmentShader: "
                            uniform lowp sampler2D colorSource;
                            uniform lowp sampler2D maskSource;
                            uniform lowp float qt_Opacity;
                            varying highp vec2 qt_TexCoord0;
                            void main() {
                                gl_FragColor =
                                    texture2D(colorSource, qt_TexCoord0)
                                    * texture2D(maskSource, qt_TexCoord0).a
                                    * qt_Opacity;
                            }
                        "
                    }
                }
            }
        }
    }
}
